<template>
    <!--    必须有唯一的根元素，否则无法使用指令-->
    <span @click="showDialog">
        <slot></slot>

        <mi-dialog
            v-model="edit.show"
            append-to-body
            title="订单发货"
        >
            <div v-loading="edit.loading">
                <el-alert title="温馨提示：如果商品处于售后状态，请先处理完售后再进行发货" type="warning"/>

                <el-table :data="tableData"
                          style="width: 100%"
                          @selection-change="goodsChange"
                          class="mb20">

                    <el-table-column type="selection" width="55" :selectable="getSelectable"/>

                    <el-table-column prop="goods_title" label="商品">
                        <template #default="{row}">
                            <div class="d_flex">
                                <mi-image class="mr10" width="48px" :src="row.goods_image"/>
                                <div>{{row.goods_title}}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" label="数量" width="180"/>
                    <el-table-column prop="delivery_type" label="发货状态" width="180">
                        <template #default="{row}">
                            <el-tag v-if="row.delivery_status == 1">已发货</el-tag>
                            <el-tag v-else-if="row.delivery_status == 2">部分发货</el-tag>
                            <span v-else>未发货</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="refund_type" label="售后" width="180">
                        <template #default="{row}">
                            <el-tag type="danger" v-if="order.waitOrderRefund?.items.some((item:any) => row.id==item.order_item_id)">售后待处理……</el-tag>
                        </template>
                    </el-table-column>
                </el-table>

                <!--                地址-->
                <el-descriptions
                    direction="vertical"
                    :column="1"
                    border
                    class="mb20"
                >
                    <el-descriptions-item label="配送地址">
                        <div>
                            {{order.userAddress.contact}} {{order.userAddress.mobile}}
                        </div>
                        <div class="f_regular">
                            {{order.userAddress.area_title}} {{order.userAddress.address}}
                        </div>
                    </el-descriptions-item>
                </el-descriptions>

                <el-descriptions
                    direction="vertical"
                    :column="1"
                    border
                >
                    <el-descriptions-item label="发货信息">

                        <el-form
                            :model="edit.info"
                            ref="formRef"
                        >
                            <el-form-item label="快递公司" prop="express_id" :rules="[{ required: true, message: '快递公司必填' } ]">
                              <express-select v-model="edit.info.express_id" />
                            </el-form-item>
                            <el-form-item label="快递单号" prop="express_order_no" :rules="[{ required: true, message: '快递单号必填' } ]">
                              <el-input v-model="edit.info.express_order_no"/>
                            </el-form-item>
                        </el-form>
                    </el-descriptions-item>
                </el-descriptions>
            </div>

            <template #footer>
                <el-button type="primary" :disabled="edit.loading" @click="submit">立即发货</el-button>
            </template>
        </mi-dialog>
    </span>
</template>

<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import Edit from "@/model/edit";
import ExpressSelect from "@/views/delivery/components/ExpressSelect.vue";
import {simplePost} from "@/utils/request";
import {msgError, msgSuccess} from "@/utils/alert";
import SiteAddressSelect from "@/views/site/components/SiteAddressSelect.vue";

const props = withDefaults(defineProps<{
    order?: any,
    id?: number
}>(), {
    order: {},
})

const emits = defineEmits(['update:order'])

const edit : Edit = reactive(new Edit({
    info:{
        orderItems:[],  // 选中的需要发货的商品
    }
}))

// 筛选出还未发货的商品
const tableData = computed(() => {
    const items = props.order.items
    const deliveryItems = props.order.deliveryItems
    return items.filter((item:any) => {
        return !deliveryItems.some((dit:any) => dit.order_item_id == item.id)
    })
})

// 商品是否允许选中
const getSelectable = (row:any, index:number) => {
    const {order} = props
    return !order.waitOrderRefund?.items.some((item:any) => row.id==item.order_item_id)
}

const showDialog = () => {
    edit.show = true
}

const goodsChange = (orderItems: any[]) => {
    edit.info.orderItems = orderItems
}

const submit = () => {
    const post = edit.info
    // 推入订单
    post.order = props.order
    if (post.orderItems.length < 1){
        msgError("请选择商品")
        return;
    }
    if (!post.express_id){
        msgError("请选择快递公司")
        return;
    }
    if (!post.express_order_no){
        msgError("请输入快递单号")
        return;
    }
    edit.loading = true
    simplePost("/store.order/delivery", edit.info).then((r) => {
        edit.show = false
        emits('update:order', r.order)
        msgSuccess("发货成功")
    }).catch(err => {
        edit.loading = false
    })
}


</script>

<style scoped>

</style>
